<template>
  <section class="xmv-button xmv-wrap">
    <h4>小键盘</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <section class="c-card carinfo-card">
        <section class="l-container c-card__item carinfo-card__item carinfo-card__item--width-94">
          <div class="o-grid carinfo-grid c-input-group">
            <div class="o-grid__cell carinfo-grid__cell carinfo-grid__cell--width-32">
              <label>车牌号码</label>
            </div>
            <div class="o-field o-grid__cell carinfo-grid__cell">
              <div class="keyborad__body">
                <div class="keyborad__input1" :class="[{'keyborad__foucs':keyboradFoucs}]" @click="showKeyboard">
                  <div class="keyborad__value1">{{keyInputValue1}}{{keyInputValue2}}</div>
                  <span class="keyborad__arrow__wrap">
                    <span class="keyborad__arrow"></span>
                  </span>
                </div>
                <div class="keyborad__input2 keyborad__input2--color" :style="{color:changeColor}"
                      :class="[{'keyborad__foucs':keyboradFoucs2}]"
                      @click="showKeyboard2">{{keyInputValue3}}<span class="keyborad__cursor"
                      v-show="keyboradCursor">|</span>
                </div>
              </div>
            </div>
          </div>
        </section>
      </section>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
&ltxm-keyboard :defaultValue="defaultValue"
          :isOpen="isOpen"
          :isOpenCharacters="isOpenCharacters"
          :isOpenLetter="isOpenLetter"
          :isOpenChartable="isOpenChartable"
          :nextKeyborad="nextKeyborad"
          :onChange="onChange"
          :onBlur="onBlur"
          :getInputValue="getInputValue"
          :onDone="onDone" :isNextKeyboradFun="isNextKeyboradFun"&gt
&lt/xm-keyboard&gt

export default {
  data() {
    return {
      defaultValue: "京A",
      keyboradFoucs: false,
      keyboradFoucs2: false,
      keyboradCursor: false,
      inputValue: "",
      keyInputValue1: "",
      keyInputValue2: "",
      keyInputValue3: "",
      isOpen: false,
      isOpenCharacters: true,
      isOpenLetter: false,
      isOpenChartable: false,
      isNextKeyborad: false,
      isCheckLicenseNo: false
    };
  },
  created() {
    this.inputValue = this.licenseNo;
  },
  computed: {
    changeColor() {
      if (
        this.keyInputValue3 === "新车未上牌无需输入" ||
        this.keyInputValue3 === "请输入车牌号"
      ) {
        return "#bbb";
      }
      return "#333";
    }
  },
  watch: {
    // licenseNo(val) {
    //   this.inputValue = val;
    // },
    inputValue(val, oldVal) {
      this.inputValue = val;
      this.defaultValue = this.inputValue.length > 2
        ? this.inputValue.substr(0, 2) : this.inputValue;

      this.keyInputValue1 = this.inputValue.substr(0, 1);
      this.keyInputValue2 = this.inputValue.substr(1, 1);
      this.keyInputValue3 = this.inputValue.substr(2);

      if (!this.keyInputValue3) {
        if (this.keyboradCursor && !this.inputValue.substr(2)) {
          this.keyInputValue3 = '';
        } else if (!this.showNewCar) {
          this.keyInputValue3 = '请输入车牌号';
        } else {
          this.keyInputValue3 = '新车未上牌无需输入';
        }
      }
    },
    isOpen() {}
  },
  methods: {
    onChange(value) {
      this.inputValue = value;
    },
    onBlur() {
      this.isOpen = false;
    },
    onDone(alert = true) {
      this.isOpen = false;
      this.keyboradFoucs = false;
      this.keyboradFoucs2 = false;
      this.keyboradCursor = false;
      this.isOpenCharacters = false; // fix 文字键盘不显示
      // this.checkLicenseNo(alert);
    },
    showKeyboard() {
      if (!this.isNextKeyborad) {
        this.isNextKeyborad = true;
      } else {
        this.isNextKeyborad = false;
      }
      this.isOpen = true;
      this.keyboradFoucs = true;
      this.keyboradFoucs2 = false;
      this.keyboradCursor = false;

      this.isOpenCharacters = true;
      this.isOpenLetter = false;
      this.isOpenChartable = false;
      if (this.inputValue && !this.inputValue.substr(2)) {
        this.keyInputValue3 = "新车未上牌无需输入";
      } else if (!this.showNewCar) {
        this.keyInputValue3 = "请输入车牌号";
      }
    },
    showKeyboard2() {
      if (!this.isNextKeyborad) {
        this.isNextKeyborad = true;
      } else {
        this.isNextKeyborad = false;
      }
      this.isOpen = true;
      this.keyboradFoucs = false;
      this.keyboradFoucs2 = true;
      this.keyboradCursor = true;
      this.isOpenCharacters = false;
      this.isOpenLetter = false;
      this.isOpenChartable = true;
      if (!this.inputValue.substr(2)) {
        this.keyInputValue3 = "";
      }
      this.isCheckLicenseNo = true;
      // this.keyInputValue3 = this.inputValue.substr(2).replace(/\d/, '');
    },
    nextKeyborad() {
      const carCode = `${this.keyInputValue1}${this.keyInputValue2}`;
      if (carCode === this.inputValue) {
        this.keyInputValue3 = "";
      }
      this.keyboradFoucs = false;
      this.keyboradFoucs2 = true;
      this.keyboradCursor = true;
      this.isOpenCharacters = false; // fix不显示地区简称
    },
    isNextKeyboradFun() {
      if (!this.isNextKeyborad) {
        this.isNextKeyborad = true;
      } else {
        this.isNextKeyborad = false;
      }
    },
    getInputValue() {
      this.isCheckLicenseNo = true;
      return this.inputValue;
    }
  },
  mounted() {
    document.addEventListener(
      "click",
      () => {
        if (this.isNextKeyborad) {
          this.isNextKeyborad = false;
        } else {
          this.isOpen = false;
          this.keyboradFoucs = false;
          if (this.keyInputValue3 === "" && this.showNewCar) {
            this.keyInputValue3 = "新车未上牌无需输入";
          } else if (this.keyInputValue3 === "" && !this.showNewCar) {
            this.keyInputValue3 = "请输入车牌号";
          }
          this.keyboradFoucs2 = false;
          this.keyboradCursor = false;
          if (this.isCheckLicenseNo) {
            if (!this.keyInputValue3) {
              this.keyInputValue3 = "新车未上牌无需输入";
            }
            this.isCheckLicenseNo = false;
            this.onDone();
          }
        }
      },
      false
    );
  }
};

        </code>
      </pre>
    </div>
    <xm-keyboard :defaultValue="defaultValue"
              :isOpen="isOpen"
              :isOpenCharacters="isOpenCharacters"
              :isOpenLetter="isOpenLetter"
              :isOpenChartable="isOpenChartable"
              :nextKeyborad="nextKeyborad"
              :onChange="onChange"
              :onBlur="onBlur"
              :getInputValue="getInputValue"
              :onDone="onDone" :isNextKeyboradFun="isNextKeyboradFun">
    </xm-keyboard>
  </section>
</template>
<script>
export default {
  data() {
    return {
      defaultValue: "京A",
      keyboradFoucs: false,
      keyboradFoucs2: false,
      keyboradCursor: false,
      inputValue: "",
      keyInputValue1: "",
      keyInputValue2: "",
      keyInputValue3: "",
      isOpen: false,
      isOpenCharacters: true,
      isOpenLetter: false,
      isOpenChartable: false,
      isNextKeyborad: false,
      isCheckLicenseNo: false
    };
  },
  created() {
    this.inputValue = this.licenseNo;
  },
  computed: {
    changeColor() {
      if (
        this.keyInputValue3 === "新车未上牌无需输入" ||
        this.keyInputValue3 === "请输入车牌号"
      ) {
        return "#bbb";
      }
      return "#333";
    }
  },
  watch: {
    // licenseNo(val) {
    //   this.inputValue = val;
    // },
    inputValue(val, oldVal) {
      this.inputValue = val;
      this.defaultValue = this.inputValue.length > 2
        ? this.inputValue.substr(0, 2) : this.inputValue;

      this.keyInputValue1 = this.inputValue.substr(0, 1);
      this.keyInputValue2 = this.inputValue.substr(1, 1);
      this.keyInputValue3 = this.inputValue.substr(2);

      if (!this.keyInputValue3) {
        if (this.keyboradCursor && !this.inputValue.substr(2)) {
          this.keyInputValue3 = '';
        } else if (!this.showNewCar) {
          this.keyInputValue3 = '请输入车牌号';
        } else {
          this.keyInputValue3 = '新车未上牌无需输入';
        }
      }
    },
    isOpen() {}
  },
  methods: {
    onChange(value) {
      this.inputValue = value;
    },
    onBlur() {
      this.isOpen = false;
    },
    onDone(alert = true) {
      this.isOpen = false;
      this.keyboradFoucs = false;
      this.keyboradFoucs2 = false;
      this.keyboradCursor = false;
      this.isOpenCharacters = false; // fix 文字键盘不显示
      // this.checkLicenseNo(alert);
    },
    showKeyboard() {
      if (!this.isNextKeyborad) {
        this.isNextKeyborad = true;
      } else {
        this.isNextKeyborad = false;
      }
      this.isOpen = true;
      this.keyboradFoucs = true;
      this.keyboradFoucs2 = false;
      this.keyboradCursor = false;

      this.isOpenCharacters = true;
      this.isOpenLetter = false;
      this.isOpenChartable = false;
      if (this.inputValue && !this.inputValue.substr(2)) {
        this.keyInputValue3 = "新车未上牌无需输入";
      } else if (!this.showNewCar) {
        this.keyInputValue3 = "请输入车牌号";
      }
    },
    showKeyboard2() {
      if (!this.isNextKeyborad) {
        this.isNextKeyborad = true;
      } else {
        this.isNextKeyborad = false;
      }
      this.isOpen = true;
      this.keyboradFoucs = false;
      this.keyboradFoucs2 = true;
      this.keyboradCursor = true;
      this.isOpenCharacters = false;
      this.isOpenLetter = false;
      this.isOpenChartable = true;
      if (!this.inputValue.substr(2)) {
        this.keyInputValue3 = "";
      }
      this.isCheckLicenseNo = true;
      // this.keyInputValue3 = this.inputValue.substr(2).replace(/\d/, '');
    },
    nextKeyborad() {
      const carCode = `${this.keyInputValue1}${this.keyInputValue2}`;
      if (carCode === this.inputValue) {
        this.keyInputValue3 = "";
      }
      this.keyboradFoucs = false;
      this.keyboradFoucs2 = true;
      this.keyboradCursor = true;
      this.isOpenCharacters = false; // fix不显示地区简称
    },
    isNextKeyboradFun() {
      if (!this.isNextKeyborad) {
        this.isNextKeyborad = true;
      } else {
        this.isNextKeyborad = false;
      }
    },
    getInputValue() {
      this.isCheckLicenseNo = true;
      return this.inputValue;
    }
  },
  mounted() {
    document.addEventListener(
      "click",
      () => {
        if (this.isNextKeyborad) {
          this.isNextKeyborad = false;
        } else {
          this.isOpen = false;
          this.keyboradFoucs = false;
          if (this.keyInputValue3 === "" && this.showNewCar) {
            this.keyInputValue3 = "新车未上牌无需输入";
          } else if (this.keyInputValue3 === "" && !this.showNewCar) {
            this.keyInputValue3 = "请输入车牌号";
          }
          this.keyboradFoucs2 = false;
          this.keyboradCursor = false;
          if (this.isCheckLicenseNo) {
            if (!this.keyInputValue3) {
              this.keyInputValue3 = "新车未上牌无需输入";
            }
            this.isCheckLicenseNo = false;
            this.onDone();
          }
        }
      },
      false
    );
  }
};
</script>


<style lang="less" scoped>
.arrow (bottom,@arrow-color:#c8c8cd,@arrow-width:2px) {
  position: absolute;
  top: 50%;
  border: @arrow-width solid @arrow-color;
  border-top-width: 0;
  border-left-width: 0;
  transform: translateY(-50%) rotate(45deg);
}
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}


.keyborad {
  &__body {
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 0 0 3px 3px;
    font-size: .32rem;
    color: #333333;
    text-align: center;
  }
  &__input1 {
    display: flex;
    align-items: center;
    min-height: .6rem;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: .32rem;
    padding: .16rem .14rem;
  }
  &__value1 {
    font-size: inherit;
    flex: 1;
    white-space: nowrap; // min-width: .68rem;
  }
  &__arrow__wrap {
    display: block;
    width: .5rem;
    height: .3rem;
    position: relative; // padding: 0 .14rem;
  }
  &__arrow {
    .arrow(bottom, #c8c8cd, 2px);
    width: .23rem;
    height: .23rem;
    left: 25%;
    top: 25%;
  }
  &__input2 {
    flex: 1;
    font-size: .3rem;
    text-align: left;
    padding: .16rem .14rem;
    border-radius: 3px; // box-shadow: 0px 1px 2px 0px #fe5958 inset;
    &--color {
      color: #333333;
    }
  }
  &__foucs {
    border: 1px #fe5958 solid;
  }
  &__cursor {
    color: #fe5958;
    animation: twinkling 2s infinite ease-in-out;
  }
}

@keyframes twinkling {
  /*透明度由0到1*/
  100% {
    opacity: 0; /*透明度为0*/
  }
  0% {
    opacity: 1; /*透明度为1*/
  }
}
</style>